/*
 * @Descripttion: your project
 * @Author: Liujiaqing
 * @Date: 2022-02-10 14:43
 * @LastEditors: Liujiaqing
 * @LastEditTime: 2022-02-10 14:43
 */
import React, { ReactNode } from 'react';
import '../style.less';
import RightLogin from './right-login';
import RightRegister from './right-register';
import RightReset from './right-reset';

interface IRightComponentsProps {
    loginStatus: string;
    step: number;
    onChangeStep: (num?: number) => void;
    changeLoginStatus: (val?: string) => void;
}
const RightComponents = (props: IRightComponentsProps) => {
    const { loginStatus = 'logined', step = 1, onChangeStep, changeLoginStatus } = props;
    const butContext: string = React.useMemo(() => {
        const butTextObj: any = {
            logined: '注册 →',
            register: '登录已有账号 →',
            forget: '',
        };
        return butTextObj[loginStatus] || '';
    }, [loginStatus]);
    React.useEffect(() => {
        console.log(step);
    }, [step]);
    const onChangeStatus = React.useCallback((status: string) => {
        changeLoginStatus(status);
    }, []);
    const returnComponents: ReactNode = React.useMemo(() => {
        if (loginStatus === 'logined') {
            return <RightLogin />;
        } else if (loginStatus === 'forget') {
            return <RightReset step={step} onChangeStep={onChangeStep} onChangeStatus={onChangeStatus}></RightReset>;
        } else {
            return <RightRegister onChangeStatus={onChangeStatus}></RightRegister>;
        }
    }, [loginStatus, step]);

    const onClickJump = React.useCallback((status: string) => {
        const statusObj = {
            logined: 'register',
            register: 'logined',
        };
        changeLoginStatus(statusObj[status]);
    }, []);

    return (
        <div className="right-container ">
            <div className="right-top-content" onClick={onClickJump.bind(null, loginStatus)}>
                {butContext}
            </div>
            <div className="right-center-content">{returnComponents}</div>
            <div className="right-bottom-content">copyright © 2020 万向区块链技术中心出品</div>
        </div>
    );
};
export default RightComponents;
